<template>
  <!-- 面包屑导航区域 -->
  <breadcrumb :childMenu="['商品管理', '商品列表']"></breadcrumb>
  <!-- 卡片视图区域 -->
  <el-card>
    <el-row>
      <el-col :span="8">
        <el-input placeholder="请输入搜索内容">
          <template #append>
            <el-button icon="el-icon-search" @click="getGoodsList"></el-button>
          </template>
        </el-input>
      </el-col>
    </el-row>
    <el-table :data="orderList" border stripe>
      <el-table-column type="index"></el-table-column>
      <el-table-column label="订单编号" prop="orderNumber"></el-table-column>
      <el-table-column label="订单价格" prop="orderPrice"></el-table-column>
      <el-table-column label="是否付款" prop="payStatus">
        <template v-slot="props">
          <el-tag type="success" v-if="props.row.payStatus === '1'">已付款</el-tag>
          <el-tag type="danger" v-else>未付款</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否发货" prop="isSend"></el-table-column>
      <el-table-column label="下单时间" prop="crteTime"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="props">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="showBox"></el-button>
          <el-button
            size="mini"
            icon="el-icon-location"
            type="success"
            @click="showProgressBox"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination
      :pageInfo="pageInfo"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></el-pagination>
  </el-card>

  <!-- 修改地址的对话框 -->
  <el-dialog
    title="修改地址"
    v-model="addressDialogVisible"
    width="50%"
    @close="addressDialogClose"
  >
    <!-- 内容主体区域 -->
    <!-- 表单中model和rules名称不可以相同 -->
    <el-form ref="addressFormRef" :model="addressForm" :rules="addressFormRules" label-width="80px">
      <el-form-item label="各市区/县" prop="address1">
        <el-cascader
          v-model="addressForm.address1"
          :options="cityData"
          :props="{
            expandTrigger: 'hover',
            value: 'value',
            label: 'label',
            children: 'children'
          }"
          @change="selectChanged"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" prop="address2">
        <el-input v-model="addressForm.address2"></el-input>
      </el-form-item>
    </el-form>
    <!-- 底部区域 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editDialogClose">取 消</el-button>
        <el-button type="primary" @click="editCateParam">确 定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 展示物流进度的对话框 -->
  <el-dialog title="物流进度" v-model="progressVisible" width="50%" @close="addressDialogClose">
    <el-timeline>
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :timestamp="activity.timestamp"
      >
        {{ activity.content }}
      </el-timeline-item>
    </el-timeline>
    <!-- 底部区域 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editDialogClose">取 消</el-button>
        <el-button type="primary" @click="editCateParam">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import Breadcrumb from "@/common/Breadcrumb.vue";
import ElPagination from "@/common/ElPagination.vue";
import cityData from "./city_data.js";
import { getOrderList } from "network/order.js";
export default {
  components: {
    Breadcrumb,
    ElPagination
  },
  data() {
    return {
      queryInfo: {
        searchTerm: "",
        pageIndex: 1,
        pageSize: 5
      },
      orderList: [],
      //分页信息
      pageInfo: [],
      //展示选取地图的对话框
      addressDialogVisible: false,
      addressForm: {
        address1: [],
        address2: ""
      },
      addressFormRules: {
        address1: [{ required: true, message: "请选择省市区", trigger: "blur" }],
        address2: [{ required: true, message: "请填写详细地址", trigger: "blur" }]
      },
      cityData,
      //展示物流进度的对话框
      progressVisible: false,
      activities: [
        {
          content: "Event start",
          timestamp: "2018-04-15"
        },
        {
          content: "Approved",
          timestamp: "2018-04-13"
        },
        {
          content: "Success",
          timestamp: "2018-04-11"
        }
      ]
    };
  },
  created() {
    this.getOrderList();
  },
  methods: {
    async getOrderList() {
      const res = await getOrderList(this.queryInfo);
      if (!res.success) return this.$message.error({ showClose: true, message: res.msg });
      this.orderList = res.response;
      this.pageInfo.totalCount = res.totalCount;
      this.pageInfo.pageIndex = res.pageIndex;
      this.pageInfo.pageSize = res.pageSize;
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getOrderList();
    },
    handleCurrentChange(newIndex) {
      this.queryInfo.pageIndex = newIndex;
      this.getOrderList();
    },
    showBox() {
      this.addressDialogVisible = true;
    },
    addressDialogClose() {
      this.$refs.addressFormRef.resetFields();
    },
    showProgressBox() {
      this.progressVisible = true;
    }
  }
};
</script>

<style lang="less" scoped>
.el-cascader {
  width: 100%;
}
</style>
